// win.js
import { Bubble } from '../component/bubble'
import { CanvasButton } from '../component/custombutton'
export class Win {
    constructor(canvas, width, height, time , backHomeCall) {
        this.canvas = canvas;
        this.context = this.canvas.getContext('2d');
        this.width = width;
        this.height = height;
        this.backHomeCall = backHomeCall;

        this.useTime = time;
        
        this.percentage = 8 / 10;

        this.modelWidth = this.width * this.percentage;
        this.modelHeight = this.height / 2;
        this.modelX = this.width / 10;
        this.modelY = this.height / 4;

        this.size_1 = this.modelHeight * (1 - this.percentage) / 2;

        this.button = [];

        this.isAnimating = true;

        this.pigSize_up = this.size_1 * 2.5;
        this.pigX_up = this.width / 2 - this.pigSize_up - this.size_1 / 2;
        this.pigY_up = this.modelY + this.size_1 * 5;

        this.pigSize_down = this.size_1 * 2.5;
        this.pigX_down = this.width / 2 + this.size_1 / 2;
        this.pigY_down = this.modelY + this.size_1 * 2;

        this.bubble = new Bubble(this.context);
        this.bubbleTime = 0;
        this.maxBubbleSize = 100;
    }

    drawPopup() {
      this.onLoadImage(() => {
            this.drawModal();
            this.drawButton();
            this.drawAnimate();
        })
    }

    drawAnimate() {
        if(this.isAnimating) {
            this.context.clearRect(this.modelX, this.modelY, this.modelWidth, this.modelHeight);
            this.drawModal();

            this.drawLeftBlock();
            this.drawRightBlock();
        }
        requestAnimationFrame(() => this.drawAnimate());
    }
    
    drawRightBlock() {
      this.context.fillStyle = 'red';

      this.context.save();

      this.context.translate(this.pigX_down + this.pigSize_down / 2, this.pigY_down + this.pigSize_down / 2);

      this.context.scale(-1, 1);

      this.context.drawImage(this.pig_background_2, -this.pigSize_down / 2, -this.pigSize_down / 2, this.pigSize_down, this.pigSize_down);

      this.context.restore();
    }

    drawLeftBlock() {
        this.context.fillStyle = 'blue';
        // this.context.fillRect(this.pigX_up, this.pigY_up, this.pigSize_up, this.pigSize_up);
        this.context.drawImage(this.pig_background_1, this.pigX_up, this.pigY_up, this.pigSize_up, this.pigSize_up);
    
        if (this.bubbleTime > 100 && this.bubbleTime < 150) {
            this.bubble.drawBubble("haha~", this.pigX_up + this.pigSize_up, this.pigY_up, this.maxBubbleSize);
        } else if(this.bubbleTime > 200 && this.bubbleTime < 250) {
            this.bubble.drawBubble("欧耶~", this.pigX_up + this.pigSize_up, this.pigY_up, this.maxBubbleSize);
        } else if(this.bubbleTime > 250){
            this.bubbleTime = 0;
        }
        this.bubbleTime += 1;
    }

    drawModal() {
        // 绘制背景图片
        this.context.drawImage(this.background_image, this.modelX, this.modelY, this.modelWidth, this.modelHeight);        

        this.context.font = `${this.size_1 / 2}px Arial`;
        this.context.fillStyle = 'black';
        this.context.textAlign = 'center';
        this.context.fillText('成功解救!', this.width / 2, this.modelY + this.size_1);
        this.context.fillText(`通关用时: ${this.useTime}`, this.width / 2, this.modelY + this.size_1 * 2);
    }

    onLoadImage(callback) {
      let loadedCount = 0;
      const totalImages = 5;

      this.background_image = wx.createImage();
      this.background_image.src = 'https://gitee.com/z-l-ya/game-image/raw/master/images/background/background_1.png';
      this.background_image.onload = () => {
        loadedCount++;
        checkIfAllLoaded();
      };

      this.pig_background_1 = wx.createImage();
      this.pig_background_1.src = 'https://gitee.com/z-l-ya/game-image/raw/master/images/icons/pig1.png';
      this.pig_background_1.onload = () => {
          loadedCount++;
          checkIfAllLoaded();
      };

      this.pig_background_2 = wx.createImage();
      this.pig_background_2.src = wx.getStorageSync('todaySkinImage');
      this.pig_background_2.onload = () => {
          loadedCount++;
          checkIfAllLoaded();
      };

      this.backImage = wx.createImage();
      this.backImage.src = 'https://gitee.com/z-l-ya/game-image/raw/master/images/icons/reback.png';
      this.backImage.onload = () => {
          loadedCount++;
          checkIfAllLoaded();
      };

      this.shareImage = wx.createImage();
      this.shareImage.src = 'https://gitee.com/z-l-ya/game-image/raw/master/images/icons/share.png';
      this.shareImage.onload = () => {
          loadedCount++;
          checkIfAllLoaded();
      };

      const checkIfAllLoaded = () => {
        if (loadedCount === totalImages && callback) {
          callback();
        }
      };
    }

    drawButton() {
        let _this = this;
        let reback = {
            type: "image",
            image: "https://gitee.com/z-l-ya/game-image/raw/master/images/icons/reback.png",
            style: {
                backgroundColor: 'transparent',
                left: this.width / 6 - this.size_1 / 6,
                top: this.height * this.percentage - this.size_1 * 3,
                width: this.width / 3,
                height: this.size_1 * 1.2,
            },
            success(button) {
                _this.button.push(button);
                button.drawButton(_this.context); // 绘制按钮
                button.onTap((res) => {
                    _this.isAnimating = false;
                    _this.buttonDestroy();
                    _this.backHomeCall();
                })
            },
        };
        let share = {
            type: "image",
            image: "https://gitee.com/z-l-ya/game-image/raw/master/images/icons/share.png",
            style: {
                backgroundColor: 'transparent',
                left: this.width / 2 + this.size_1 / 6,
                top: this.height * this.percentage - this.size_1 * 3,
                width: this.width / 3,
                height: this.size_1 * 1.2,
            },
            success(button) {
                _this.button.push(button);
                button.drawButton(_this.context); // 绘制按钮
                button.onTap((res) => {
                    _this.isAnimating = false;
                    wx.shareAppMessage({
                        templateId: "17e8909gid9igiaedl",
                        query: "",
                        success() {
                          console.log("分享成功");
                        },
                        fail(e) {
                          console.log("分享失败");
                        },
                      });
                    // wx.showModal({
                    //     title: "努力开发中噢~",
                    //     content: "敬请期待~"
                    // });
                })
            },
        };
        new CanvasButton(reback);
        new CanvasButton(share);
    }

    buttonDestroy() {
        this.button.forEach(bt => {
            bt.destroy();
        });
        // this.button = null;
    }
}
